<template>
        <h1 class="home_title" style="text-align: center;">
            <el-button :icon="ArrowLeft" @click="getPreYearData">上一年</el-button>
            &nbsp;&nbsp;&nbsp;&nbsp;
            <span>{{ year }}</span>
            <span>年学员数量</span>
            &nbsp;&nbsp;&nbsp;&nbsp;
            <el-button @click="getNextYearData">下一年<el-icon><ArrowRight /></el-icon></el-button>
        </h1>
        <div id="main" style="height: 500px;"></div>
</template>
<script setup lang="ts">
import * as echarts from 'echarts';
import { onMounted, ref } from 'vue';
import { reqStudentForYear } from '@/api/student';
import { ArrowLeft, ArrowRight } from '@element-plus/icons-vue';
import { ElMessage } from 'element-plus';

const year = ref(2025)
const getPreYearData = (()=>{
    year.value--
    drawChart()
})
const getNextYearData = (()=>{
    year.value++
    drawChart()
})

// 绘制图表
const drawChart = ()=>{
    // 发送请求获取数据
    reqStudentForYear(year.value).then((resp)=>{
        if(resp.status == 0){
            // 基于准备好的dom，初始化echarts实例
            var myChart = echarts.init(document.getElementById('main'));
            // 数据数组
            let dataArr:number[] = []
            // 配置项
            let option;
            // 如果当前年份有数据
            if(resp.data && resp.data.length){
                resp.data.forEach(item=>{
                    console.log(item);
                    dataArr[parseInt(item._id) - 1] = item.count
                })
            }else{
                ElMessage({
                    message:"当前年份无学员数据",
                    type:"warning"
                })
            }
            option = {
                xAxis: {
                    data: ['一月', '二月', '三月', '四月', '五月', '六月','七月', '八月', '九月', '十月', '十一月', '十二月']
                },
                yAxis: {
                    type:"value"
                },
                series: [
                    {
                        type: 'bar',
                        data: dataArr
                    }
                ]
            }
            myChart.setOption(option)
        }
    })
}

onMounted(() => {
    drawChart()
})
</script>

<style scoped></style>